<template>
  <div>
    <el-input v-model="authorsearch"
              class="w-50 m-2"
              size="large"
              placeholder="根据留言者筛选"
              :suffix-icon="Search"
              style="width:200px;margin-left:200px" />
    <el-input v-model="contentsearch"
              class="w-50 m-2"
              size="large"
              placeholder="根据内容搜索"
              :suffix-icon="Search"
              style="width:200px;margin-left:200px" />
    <el-table :data="viewmessage"
              @sort-change="sortchange"
              style="width: 100%">
      <el-table-column label="留言者"
                       prop="author" />
      <el-table-column label="留言内容"
                       prop="content" />
      <el-table-column label="留言时间"
                       sortable
                       prop="createAt" />
      <el-table-column fixed="right"
                       label="Operations"
                       width="260">
        <template #default="scope">
          <el-popconfirm title="删除留言"
                         @confirm="deletereply(scope.row.id)">
            <template #reference>
              <el-button size="small"
                         type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   style="width:200px;margin:10px auto"
                   layout="prev, pager, next"
                   :page-size="7"
                   v-model:current-page="start"
                   :total="messages.length" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue'
import { mangetallmessageapi, deletereplyapi } from '@/apis/message'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { formattime } from '@/utils'
interface messageinter {
  content: string
  id: number
  createAt: string
  author: string
}
export default defineComponent({
  name: 'v-message',
  setup() {
    const router = useRouter()
    const messages = ref<messageinter[]>([])
    const messages1 = ref<messageinter[]>([])
    const start = ref<number>(1) //分页
    const viewmessage = ref<messageinter[]>([]) //分页展示的留言
    const authorsearch = ref<string>('') //根据留言者搜索
    const contentsearch = ref<string>('') //根据内容搜索
    watch(messages, () => {
      pagechange()
    })
    watch([contentsearch, authorsearch], () => {
      messages.value = messages1.value?.filter(
        (item: messageinter) =>
          item.content.includes(contentsearch.value) &&
          item.author.includes(authorsearch.value)
      )
    })
    watch(start, () => {
      pagechange()
    })

    //分页展示
    const pagechange = () => {
      console.log(messages.value)

      viewmessage.value = messages.value?.slice(
        (start.value - 1) * 7,
        start.value * 7
      )
    }
    //获取所有数据
    const getmessagefn = async () => {
      try {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        let re: any = await mangetallmessageapi()
        re = re.result.map((item: messageinter) => ({
          ...item,
          createAt: formattime(item.createAt),
        }))
        messages1.value = re
        messages.value = re
      } catch (e) {
        ElMessage.error('身份失效')
        router.push('/login')
      }
    }
    //删除留言
    const deletereply = async (id: number) => {
      try {
        await deletereplyapi(id)
        ElMessage.success('删除成功')
        getmessagefn()
      } catch (e) {
        ElMessage.error('身份失效')
        router.push('/login')
      }
    }
    //展示顺序改变
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const sortchange = (all: any) => {
      if (all.order === 'ascending') {
        messages.value = messages.value.sort(
          (a: messageinter, b: messageinter) =>
            a.createAt.localeCompare(b.createAt)
        )

        messages1.value = messages1.value.sort(
          (a: messageinter, b: messageinter) =>
            a.createAt.localeCompare(b.createAt)
        )
      } else {
        messages.value = messages.value.sort(
          (a: messageinter, b: messageinter) =>
            b.createAt.localeCompare(a.createAt)
        )
        messages1.value = messages1.value.sort(
          (a: messageinter, b: messageinter) =>
            b.createAt.localeCompare(a.createAt)
        )
      }
    }
    onMounted(() => {
      getmessagefn()
    })
    return {
      viewmessage,
      deletereply,
      start,
      authorsearch,
      contentsearch,
      messages,
      sortchange,
    }
  },
})
</script>

<style scoped>
:deep(.cell) {
  height: 45px;
}
</style>